<template>
	<view class="doc">
<u-navbar
		          title="医生评价"
		          :autoBack="true"
		      >
		      </u-navbar>
		<!-- 评价 -->
		<view class="comment">

			<view class="commenlist">
				<view class="commenitem" v-for="item in pinglist">
					<view class="zhiding" v-if="item.top=='1'">
						<image src="../../static/icons/zhiding.png" mode="aspectFit"></image>
					</view>
					<view class="remen" v-if="item.delicacy=='1'">
						<image src="../../static/icons/remen.png" mode="aspectFit"></image>
					</view>
					<view class="comhos">
						<view class="comhosmain">
							<view class="zhi" style="display: flex;">
								<u-icon name="map-fill"></u-icon><span style="margin-left: 10rpx;">执业地点</span>
							</view>
							<view class="zhiinfo">
								{{item.departmentsName}} {{item.hospitalName}}
							</view>
						</view>
					</view>
					<view class="comall">
						<view class="comtop">
							<view class="comtopl">
								{{item.userName}}
								<span>{{item.diagnosis}}</span>
							</view>
							<view class="comtopr">
								<u-rate :count="count" v-model="item.totalScore" active-color="#F2CB51"></u-rate>
							</view>
						</view>
						<view class="cominfo" v-if="item.showText">
							{{item.commentContent}}

						</view>
						<view class="cominfo" v-if="!item.showText">
							{{item.commentContent.substr(0, 53)}}...

						</view>
						<view class="" v-if="item.showText">
							<text v-if="item.commentContent !== null && item.commentContent.length > 53"
								class="full_text" @click="toggleDescription(item)">收起</text>
						</view>
						<view class="" v-if="!item.showText">
							<text v-if="item.commentContent !== null && item.commentContent.length > 53"
								class="full_text" @click="toggleDescription(item)">查看全部></text>
						</view>
						<view class="combot">
							<view class="cbotl">
								<view class="cbotli">
									<image mode="aspectFit" src="../../static/icons/chakan.png"></image>
									<span style="margin-left: 10rpx;">{{item.viewCount}}</span>
								</view>
								<view class="cbotli" @click="dian(item)">
									<image v-if="item.dianshow==false" mode="aspectFit" src="../../static/icons/dz.png">
									</image>
									<image v-if="item.dianshow==true" mode="aspectFit" src="../../static/icons/dza.png">
									</image>
									<span>{{item.praiseClick}}</span>
								</view>
							</view>
							<view class="cbotr">
								{{item.createTime}}
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>

	</view>
</template>

<script>
	import homeApi from '@/api/home'
	export default {
		data() {
			return {

				pinglist: [],
				count: 5,
				value: "",
				pageNumber: "0",
				pageSize: "10",
				total: "",
				docid: "",
				totall: "",
				doctorCode:""
			}
		},
		onLoad(option) {
			this.docid = option.docid
			this.doctorCode=option.doccode
			if (this.docid) {
				this.getpingjia()
			}
wx.hideShareMenu({
				success(res) {
					console.log('success', res) // {success: true}
				},
				fail(err) {
					console.log('fail', err)
				}
			})

		},
		onReachBottom() {
			if (this.total == this.totall) {

			} else {
				this.pageNumber++;
				this.getpingjia()
			}


		},
		methods: {
			getpingjia() {
				homeApi.getpingjia({
					doctorId: this.docid,
					doctorCode: this.doctorCode,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				}).then(res => {
					let pinglist = []
					pinglist = res.data.comments
					pinglist.forEach(al => {
						al.dianshow = false
						if (al.commentContent.length > 60) {
							al.showText = false
						} else {
							al.showText = true
						}
					})
					this.total = res.data.total
					console.log(this.total, "1213")


					if (pinglist.length != 0) {
						pinglist.forEach(el => {
							let item = this.pinglist.find(ele => ele.id == el.id);
							if (!item) {
								this.pinglist.push(el)
							}
						})
					}
					this.totall = this.pinglist.length
				})
			},
			// 全文展开收起
			toggleDescription(num) {
				num.showText = !num.showText
				this.$forceUpdate();
			},
			dian(item) {
				item.dianshow = !item.dianshow
				if (item.dianshow == true) {
					item.praiseClick++
				}
				if (item.dianshow == false) {
					item.praiseClick--
				}
				this.$forceUpdate()
			},




		}
	}
</script>

<style scoped lang="scss">
	.doc {
		background-color: #F5F6F8;
		padding-bottom: 100rpx;
		overflow: hidden;
padding-top: 180rpx;

		.commenlist {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			overflow: hidden;

			.commenitem {
				width: 100%;
				border-radius: 15rpx;
				background-color: #fff;
				margin-top: 20rpx;
				position: relative;
				.zhiding {
					position: absolute;
					top: 0rpx;
					right: 80rpx;

					image {
						width: 50rpx;
						height: 70rpx;
					}
				}

				.remen {
					position: absolute;
					top: 0rpx;
					right: 20rpx;

					image {
						width: 50rpx;
						height: 70rpx;
					}
				}

				.comall {
					width: 95%;
					margin: 0 auto;
					padding-top: 20rpx;
					padding-bottom: 20rpx;

					.comtop {
						display: flex;
						justify-content: space-between;

						.comtopl {
							font-size: 26rpx;
							color: #999;

							span {
								height: 35rpx;
								font-size: 20rpx;
								display: inline-block;
								padding-left: 10rpx;
								padding-right: 10rpx;
								line-height: 35rpx;
								margin-left: 10rpx;
								background-color: #eaf3fc;
								border-radius: 5rpx;
								color: #417ef7;
							}
						}

						.comtopr {
							color: #ea661f;
							font-size: 28rpx;
						}
					}

					.cominfo {
						font-size: 24rpx;
						line-height: 35rpx;
						color: #333;
						margin-top: 10rpx;
						// height: 70rpx;
						// letter-spacing: 1rpx;
						// display: -webkit-box;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// word-wrap: break-word;
						// white-space: normal !important;
						// -webkit-line-clamp: 2;
						// -webkit-box-orient: vertical;
					}

					.full_text {
						font-size: 24rpx;
						color: #417ef7;
						line-height: 50rpx;
					}

					.combot {
						display: flex;
						justify-content: space-between;
						margin-top: 10rpx;

						.cbotr {
							font-size: 20rpx;
							color: #888;
						}

						.cbotl {
							display: flex;

							.cbotli {
								display: flex;
								font-size: 20rpx;
								color: #888;
								margin-right: 20rpx;

								image {
									width: 30rpx;
									height: 20rpx;
								}

								span {
									line-height: 20rpx;
								}
							}
						}
					}
				}

				.comhos {
					width: 100%;
					background-color: #efefef;
					border-radius: 15rpx 15rpx 0 0;

					.comhosmain {
						width: 95%;
						margin: 0 auto;
						padding-top: 20rpx;
						padding-bottom: 20rpx;

						.zhi {
							font-size: 28rpx;
						}

						.zhiinfo {
							font-size: 22rpx;
							color: #666;
							line-height: 40rpx;
						}
					}
				}
			}
		}



	}
</style>
